<template>
    <div>
        <a-card :bordered="false">
            <DynamicFormSearch
                :form-items="formItems"
                :initial-values="searchForm"
                @submit="handleSearch"
                @reset="handleReset"
            />
        </a-card>
    </div>
</template>

<script setup lang="ts">
import type { Dayjs } from "dayjs";

import type { FormItemConfig } from "../types/form-config";

const searchForm = reactive({
    input: "",
    gender: undefined as string | undefined,
    inputnumber: undefined as number | undefined,
    password: "",
    checkbox: [] as string[],
    datepicker: null as Dayjs | null,
    daterangepicker: null as [Dayjs, Dayjs] | null,
    radio: "",
    textarea: ""
});

const formItems: FormItemConfig[] = [
    {
        type: "input",
        name: "input",
        label: "输入框",
        componentProps: {
            placeholder: "请输入文本",
            allowClear: true
        },
        rules: [
            {
                required: true,
                message: "请输入文本"
            }
        ]
    },
    {
        type: "select",
        name: "gender",
        label: "性别",
        componentProps: {
            placeholder: "请选择性别",
            options: [
                {
                    label: "未知",
                    value: "unknown"
                },
                {
                    label: "男",
                    value: "male"
                },
                {
                    label: "女",
                    value: "female"
                }
            ]
        }
    },
    {
        type: "input-number",
        name: "inputnumber",
        label: "数字输入框",
        componentProps: {
            placeholder: "请输入账号"
        }
    },
    {
        type: "input-password",
        name: "password",
        label: "密码输入框",
        componentProps: {
            placeholder: "请输入密码"
        }
    },
    {
        type: "checkbox",
        name: "checkbox",
        label: "多选框",
        componentProps: {
            options: [
                {
                    label: "选项1",
                    value: "1"
                },
                {
                    label: "选项2",
                    value: "2"
                }
            ]
        }
    },
    {
        type: "date-picker",
        name: "datepicker",
        label: "日期选择框",
        componentProps: {
            onSelect(value) {
                console.log(value);
            }
        }
    },
    {
        type: "date-range-picker",
        name: "daterangepicker",
        label: "日期范围选择框",
        componentProps: {}
    },
    {
        type: "radio",
        name: "radio",
        label: "单选框",
        componentProps: {
            options: [
                {
                    label: "选项1",
                    value: "1"
                },
                {
                    label: "选项2",
                    value: "2"
                }
            ]
        }
    },
    {
        type: "textarea",
        name: "textarea",
        label: "文本输入框",
        componentProps: {
            rows: 4,
            allowClear: true
        }
    }
];

const handleSearch = (values: any) => {
    console.log(values);
};

const handleReset = () => {
    Object.keys(searchForm).forEach(key => {
        (searchForm as any)[key] = void 0;
    });
};
</script>

<style scoped lang="scss"></style>
